<template>
    <d-modal ref="modalRef" @close="handleClose">
        <el-container class="add-icons-container" h-full>
            <el-aside>
                <ul class="left-tabs">
                    <li class="tab-item" @click="changeTab('components')" :class="{'active':activeTab == 'components'}">
                        <span class="flex-x">
                            <i class="iconfont icon-gongju" mr5 style="font-size: 20px;"></i>
                            小组件
                        </span>
                    </li>
                    <li class="tab-item" @click="changeTab('webNav')" :class="{ 'active': activeTab == 'webNav' }">
                        <span class="flex-x">
                            <i class="iconfont icon-zhinanzhen" mr5 style="font-size: 20px;"></i>
                            网页导航
                        </span>
                    </li>
                    <li class="tab-item" @click="changeTab('custom')" :class="{ 'active': activeTab == 'custom' }">
                        <span class="flex-x">
                            <i class="iconfont icon-huodongzujian-04" mr5 style="font-size: 20px;"></i>
                            自定义图标
                        </span>
                    </li>
                </ul>
            </el-aside>
            <el-main h-full>
                <div class="search-part flex-x" v-show="activeTab != 'custom'">
                    <el-input size="small" style="width: 220px;--el-input-border-radius:10px" placeholder="输入并搜索" :prefix-icon="Search"></el-input>
                    <el-form-item label="目标分组" style="margin-bottom: 0;margin-left:20px;">
                        <el-select size="small" style="width:90px">
                            <el-option v-for="item in globalStore.sidebar.groupList" :label="item.name" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </div>
                <CustomIcon @close="closeModal" v-show="activeTab == 'custom'"/>
                <SmallComponents v-show="activeTab == 'components'"/>
                <WebNav v-show="activeTab == 'webNav'"/>
            </el-main>
        </el-container>

    </d-modal>
</template>

<script setup lang="ts">
import dModal from '@/components/modal/index.vue'
import { useModal } from '@/components/modal'
import CustomIcon from '@/components/modal/components/add/customIcon.vue'
import SmallComponents from '@/components/modal/components/add/smallComponents.vue'
import WebNav from '@/components/modal/components/add/webNav.vue'
import { Search } from '@element-plus/icons-vue'
import { useGlobalStore } from '@/store/module/global'

const emits = defineEmits(['close'])
const globalStore = useGlobalStore()

const activeTab = ref('components')

const changeTab = (tab:string) => {
    activeTab.value = tab
}

const {
    modalRef,
    showModal,
    closeModal
} = useModal()

const show = () => {
    showModal()
}

const handleClose = () => {
    emits('close')
}

defineExpose({
    show,
    modalRef
})
</script>

<style lang="scss">
.add-icons-container {
    .el-aside {
        width: 160px;
        height: 100%;
        background-color: var(--bg-card);
    }

    .left-tabs {
        margin-top: 60px;

        .tab-item {
            margin: 5px 0;
            padding: 12px 18px;
            cursor: pointer;

            &.active{
                color: var(--primary-color);
            }

            &:hover{
                color: var(--primary-color);
            }
        }
    }

    .el-main {
        overflow: hidden;
        padding: 10px;
        background-color: var(--add-dialog-bg);

        .search-part{
            padding-top: 5px;
            .el-select{
                .el-input{
                    --el-input-border-radius:10px
                }
            }
        }
    }


}
</style>